<template>
  <div class="amap-page-container">
    <el-amap
      vid="amapDemo"
      :center="[lng,lat]"
      :zoom="zoom"
      class="amap-demo"
      :dragEnable="true"
      :zoomEnable="true"
      pitch-enable="false"
    >
      <el-amap-marker  :position="[lng,lat]" />
    </el-amap>
  </div>
</template>

<script>

export default {
  name: 'AmapPage',
  props:{
    lng:{
      type:String|Number,
      default:0
    },
    lat:{
      type:String|Number,
      default:0
    }
  },
  data: function() {
    const self = this
    return {
      data: [{
        position: `${this.lng},${this.lat}`,
      }],
      zoom: 17,
      center: [this.lng,this.lat],
      expandZoomRange: false,
      markers: [],
   
    }
  },
  mounted() {
    this.point()
  },
  methods: {
    point() {
      const markers = []
      const that = this
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          // icon:item.url, //不设置默认蓝色水滴
          events: {
            mouseover() {
            }
          }
        })
      })
      //  加点
      this.markers = markers
    },
    
  }

}
</script>

<style lang="scss" scoped>
    .amap-demo {
      width: 400px;
      height: 250px;
    }
    .amap-page-container {
      position: relative;
    }
    #info-window{
      width: 211px;
      height: 146px;
      margin-left: 30px;
      background:rgba(255,255,255,0.9);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      .detail{
        width: 100%;
        height: 24px;
        color: #fff;
        background-color: #1a73e8;
        position: absolute;
        bottom: 0;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
      }
    }
</style>